<template>
  <div class="chat-menu">
    <span :class="{active:selectIndex===-1}" @click="selectNew">+新建菜单</span>
    <span  :class="{active: selectIndex===index}" v-for="(item,index) in menuList" :key="index" @click="selectInfo(item,index)">{{item.groupName}}</span>
  </div>
</template>

<script>
export default {
name: "chat-menu",
  data(){
    return{
      selectIndex:-1,
      menuList:[]
    }
  },
  methods:{
    addGroup(data){
      this.menuList.push(data)
    },
    selectInfo(item,index){
      if(this.selectIndex===index){
        return
      }
      this.selectIndex = index
      this.$emit("selectInfo",item)
    },
    selectNew(){
      if(this.selectIndex===-1)return
      this.selectIndex = -1
      this.$emit("selectInfo","")
    }
  }
}
</script>

<style scoped>
.chat-menu{
  display: flex;
  flex-direction: column;
  height: 52vh;
}
.chat-menu span{
  line-height: 3.8vh;
  border-radius: 5px;
  border: solid 1px rgb(243, 245, 242);
  margin: 1px;
  cursor: pointer;
}
.chat-menu span.active{
  background: #e7f0f3;
  font-weight: bold;
}
</style>